<template>
  <div class="equipment">
    <x-header>用气设备信息
      <div href="javascript:;" class="headerAdd" @click="bindHeaderAdd">
        <img src="../../assets/img/securityCheckImg/addHeader.png" alt="">
      </div>
    </x-header>
    <!-- {{CONS_NO}} -->
    <div class="information-item equipment-item">
      <img  class="information-item-leftImg" src="../../assets/img/securityCheckImg/titledecoration.png" alt="">
      <div class="information-item-title">供气点</div>
        <popup-picker class="information-item-input" :data="MP_ID_LIST" show-name v-model="MP_ID" @on-change="onChange" placeholder="请选择"></popup-picker>
      <!-- <img  class="information-item-rightImg" src="../../assets/img/securityCheckImg/rightArrow.png" alt=""> -->
    </div>
    <div class="equipmentContent contractContent" v-for="(item, index) in dataList" :key="index" @click="equipmentClick($event,item)">
      <div class="information-item">
        <div class="information-item-title">设备编号</div>
        <div class="information-item-answer">{{item.PROD_BAR}}</div>
      </div>
      <div class="information-item">
        <div class="information-item-title">条形码</div>
        <div class="information-item-answer">{{item.PROD_BAR}}</div>
      </div>
      <div class="information-item">
        <div class="information-item-title">设备类型/用途</div>
        <div class="information-item-answer">{{item.EQUIT_TYPE_NAME}}/{{item.EQUIT_USE_NAME}}</div>
      </div>
      <div class="information-item">
        <div class="information-item-title">使用类型</div>
        <div class="information-item-answer">{{item.EQUIT_USE_TYPE_NAME}}</div>
      </div>
      <!-- <div class="information-item">
        <div class="information-item-title">购买地</div>
        <div class="information-item-answer">{{}}</div>
      </div> -->
      <div class="information-item">
        <div class="information-item-title">安装方式/位置</div>
        <div class="information-item-answer">{{item.EQUIP_INS_MODE_NAME}}/{{item.INST_ADD}}</div>
      </div>
      <div class="information-item">
        <div class="information-item-title">设备品牌/型号</div>
        <div class="information-item-answer">{{item.PROD_BRAND}}/{{item.PROD_MODEL_NAME}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { XHeader, PopupPicker } from "vux";
import Vue from "vue";
import { sqlQuery } from "@/utils/sqlOperation";
export default {
  data() {
    return {
      dataList: [],
      DEVICE_CLASS_LIST: [],
      EQUIT_USE_TYPE_LIST: [],
      EQUIP_INS_MODE_LIST: [],
      PROD_BRAND_LIST: [],
      PROD_MODEL_LIST: [],
      USE_LIST: [],
      MP_ID: [],
      MP_ID_LIST: [],
      CONS_NO: ""
    };
  },
  components: {
    XHeader,
    PopupPicker
  },
  methods: {
    bindHeaderAdd() {
      this.$router.push({
        path: "/equipmentMaintain?CONS_NO=" + this.CONS_NO
      });
    },
    onChange(val) {
      console.log("val change", val);
      this.sqlQuery_PRODINFO(
        this.CONS_NO,
        val[0],
        "CUST_PRODINFO",
        this.callback
      );
    },
    callback(str, msg) {
      const _this = this;
      console.log(2222222,str, msg);
      switch (str) {
        case "change":
          const msgData = msg.map(function(item) {
            // 性质,分类
            for (let i in _this.DEVICE_CLASS_LIST) {
              if (_this.DEVICE_CLASS_LIST[i].value == item.EQUIT_TYPE) {
                item.EQUIT_TYPE_NAME = _this.DEVICE_CLASS_LIST[i].name;
              }
            }
            // 用途
            for (let i in _this.USE_LIST) {
              if (_this.USE_LIST[i].value == item.EQUIP_USE) {
                item.EQUIT_USE_NAME = _this.USE_LIST[i].name;
              }
            }
            // 类型
            for (let i in _this.EQUIT_USE_TYPE_LIST) {
              if (_this.EQUIT_USE_TYPE_LIST[i].value == item.EQUIP_USE_TYPE) {
                item.EQUIT_USE_TYPE_NAME = _this.EQUIT_USE_TYPE_LIST[i].name;
              }
            }
            // 方式
            for (let i in _this.EQUIP_INS_MODE_LIST) {
              if (_this.EQUIP_INS_MODE_LIST[i].value == item.EQUIP_INS_MODE) {
                item.EQUIP_INS_MODE_NAME = _this.EQUIP_INS_MODE_LIST[i].name;
              }
            }
            // 方式
            for (let i in _this.PROD_MODEL_LIST) {
              if (_this.PROD_MODEL_LIST[i].value == item.PROD_MODEL) {
                item.PROD_MODEL_NAME = _this.PROD_MODEL_LIST[i].name;
              }
            }
            return item;
          });
          Vue.set(_this, "dataList", msgData);
          break;
        case "noChange":
          const msgDataChange = msg.map(function(item) {
            // 性质,分类
            for (let i in _this.DEVICE_CLASS_LIST) {
              if (_this.DEVICE_CLASS_LIST[i].value == item.EQUIT_TYPE) {
                item.EQUIT_TYPE_NAME = _this.DEVICE_CLASS_LIST[i].name;
              }
            }
            // 用途
            for (let i in _this.USE_LIST) {
              if (_this.USE_LIST[i].value == item.EQUIP_USE) {
                item.EQUIT_USE_NAME = _this.USE_LIST[i].name;
              }
            }
            // 类型
            for (let i in _this.EQUIT_USE_TYPE_LIST) {
              if (_this.EQUIT_USE_TYPE_LIST[i].value == item.EQUIP_USE_TYPE) {
                item.EQUIT_USE_TYPE_NAME = _this.EQUIT_USE_TYPE_LIST[i].name;
              }
            }
            // 方式
            for (let i in _this.EQUIP_INS_MODE_LIST) {
              if (_this.EQUIP_INS_MODE_LIST[i].value == item.EQUIP_INS_MODE) {
                item.EQUIP_INS_MODE_NAME = _this.EQUIP_INS_MODE_LIST[i].name;
              }
            }
            // 方式
            for (let i in _this.PROD_MODEL_LIST) {
              if (_this.PROD_MODEL_LIST[i].value == item.PROD_MODEL) {
                item.PROD_MODEL_NAME = _this.PROD_MODEL_LIST[i].name;
              }
            }
            return item;
          });
          Vue.set(_this, "dataList", this.dataList.concat(msgDataChange));
          break;
        default:
          break;
      }
    },
    equipmentClick(event, item) {
      this.$router.push({
        path:
          "/equipmentMaintain?item=" + JSON.stringify(item) + "&change_type=2"
      });
    },
    sqlQuery_PRODINFO(cons_no, mp_id, tableName, callback) {
      console.log(123123, cons_no, mp_id, tableName);
      const _this = this;;
      const changeName = (tableName + "_CHANGE").toUpperCase();
      AndroidApi.queryTableData(
        JSON.stringify({
          whereClause:
            "SELECT * FROM " +
            changeName +
            " A  WHERE A.CONS_NO=? AND A.MP_ID=?;",
          whereArgs: [cons_no, mp_id]
        }),
        function(msg) {
          callback("change", msg.result);
        }
      );
      AndroidApi.queryTableData(
        JSON.stringify({
          whereClause:
            "SELECT *  FROM " +
            tableName.toUpperCase() +
            " B WHERE B.CONS_NO=?  AND B.MP_ID=?;",
          whereArgs: [cons_no, mp_id]
        }),
        function(msg) {
          console.log(33333,msg.result);
          if (msg.result.length > 0) {
            callback("noChange", msg.result);
          }
        }
      );
    }
  },
  mounted() {
    Vue.set(this, "CONS_NO", localStorage.getItem("CONS_NO"));
    const _that = this;
    // 供气点
    AndroidApi.queryTableData(
      JSON.stringify({
        whereClause: "select * from MP_INFO where CONS_NO= ?",
        whereArgs: [_that.CONS_NO]
      }),
      function(msg) {
        if (msg.resultCode === "9999") {
          const MP_ID_LIST = msg.result.map(item => {
            return {
              name: item.MP_ADDR,
              value: item.MP_ID
            };
          });
          Vue.set(_that, "MP_ID_LIST", [MP_ID_LIST]);
          Vue.set(_that, "MP_ID", [MP_ID_LIST[0].value]);
        }
      }
    );
    // 设备类型
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["mdmDevSort"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          const DEVICE_CLASS_LIST = msg.result.map(item => {
            return {
              name: item.CODE_NAME,
              value: item.CODE_VALUE
            };
          });
          Vue.set(_that, "DEVICE_CLASS_LIST", DEVICE_CLASS_LIST);
        }
      }
    );
    //ss用途
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["bpUse"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          const USE_LIST = msg.result.map(item => {
            return {
              name: item.CODE_NAME,
              value: item.CODE_VALUE
            };
          });
          Vue.set(_that, "USE_LIST", USE_LIST);
        }
      }
    );
    // 使用类型
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["mdmDevType"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          const EQUIT_USE_TYPE_LIST = msg.result.map(item => {
            return {
              name: item.CODE_NAME,
              value: item.CODE_VALUE
            };
          });
          Vue.set(_that, "EQUIT_USE_TYPE_LIST", EQUIT_USE_TYPE_LIST);
        }
      }
    );
    // 安装方式
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["mdmFacilityInsmode"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          const EQUIP_INS_MODE_LIST = msg.result.map(item => {
            return {
              name: item.CODE_NAME,
              value: item.CODE_VALUE
            };
          });
          Vue.set(_that, "EQUIP_INS_MODE_LIST", EQUIP_INS_MODE_LIST);
        }
      }
    );
    // 设备品牌
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["pmProdBrand"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          const PROD_BRAND_LIST = msg.result.map(item => {
            return {
              name: item.CODE_NAME,
              value: item.CODE_VALUE
            };
          });
          Vue.set(_that, "PROD_BRAND_LIST", PROD_BRAND_LIST);
        }
      }
    );
    // 规格型号
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["mdmFacilityModel"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          const PROD_MODEL_LIST = msg.result.map(item => {
            return {
              name: item.CODE_NAME,
              value: item.CODE_VALUE
            };
          });
          Vue.set(_that, "PROD_MODEL_LIST", PROD_MODEL_LIST);
        }
      }
    );
    console.log(11111111111,_that.MP_ID[0]);
    _that.sqlQuery_PRODINFO(
      _that.CONS_NO,
      _that.MP_ID[0],
      "CUST_PRODINFO",
      _that.callback
    );
  }
};
</script>
<style scoped lang="less">
@import "../../assets/less/style.less";
.equipment {
  height: 100%;
}
</style>
<style>
@import "../../assets/less/vuxStyle.less";
</style>
